<template>
    <div>
        <!--营业时间-->
        <div class="mchtTime">
            <h3 class="title common">营业时间</h3>
            <div class="time">
                <i class="iconfont icon-shijian- left"></i>
                <p class="service_timer">
                    <span>{{busInfoDetail.mchtBusDay | businessDay}} {{busInfoDetail.mchtBusTime}}</span>
                    <span v-if="busInfoDetail.mchtBusDay2">{{busInfoDetail.mchtBusTime2}}   {{busInfoDetail.mchtBusDay2 | businessDay}}</span>
                </p>
            </div>
        </div>
        <!--间隔-->
        <div class="clear"></div>
        <!--服务设施-->
        <div class="mchtFacil clearfix">
            <h3 class="title common">服务设施</h3>
            <div class="facil_box">
             <ul class="facilities_cont clearfix">
               <li v-for="(item,index) in facilities" :key="index"  v-if="facil[index]!=0">
                  <i class="iconfont" :class="item.class"></i>
                  <span>{{item.type}}</span>
               </li>
             </ul>
            </div>
        </div>
        <!--其他分店-->
        <div class="other">
            <h3 class='otherMcht'>其他分店（{{businessInfo.num || 0}}）</h3>
            <template v-for="(item,index) in mchtListInfo">
                <mchtListInfo :mchtInfo="item" :bannerNum="bannerNum"></mchtListInfo>
                <merch-coupon  :couponName="item.couponName" :couponType="item.couponType" :denomination="item.denomination" :validatyEnd="item.validatyEnd" :mchtInfo='item' :flag='true'></merch-coupon>
                <div class="div_space" v-if="(index+1) != mchtListInfo.length"></div>
            </template>
        </div>
    </div>
</template>
<script>
  import mcht from './mcht.vue'
  import getData from '../../service/getData.js'
  import getData2 from '../../service/getData2.js'
  import getData4 from "../../service/getData4.js";
  import {Storage} from 'src/utils/storage.js'
  export default{
      name:'serviceInfo',
      data(){
          return{
              mchtListInfo: [],
              businessInfo:'',
              busInfoDetail:'',
              bannerNum:'',
              facil:[],
              facilities: [{
                  type: 'WIFI',
                  class: 'icon-fuwusheshiwifi-'
              },
                  {
                      type: '可停车',
                      class: 'icon-fuwusheshitingche-'
                  },
                  {
                      type: '刷卡',
                      class: 'icon-fuwusheshishuaqia-'
                  },
                  {
                      type: '卡座',
                      class: 'icon-fuwusheshiqiazuo-'
                  },
                  {
                      type: '包间',
                      class: 'icon-fuwusheshibaojian-'
                  },
                  {
                      type: '宝宝椅',
                      class: 'icon-fuwusheshibaobaoyi-'
                  },
                  {
                      type: '无烟',
                      class: 'icon-fuwusheshiwuyanqu-'
                  },
                  {
                      type: '吸烟区',
                      class: 'icon-fuwusheshixiyanqu-'
                  },
                  {
                      type: '沙发位',
                      class: 'icon-fuwusheshishafa-'
                  },
                  {
                      type: '露天位',
                      class: 'icon-fuwusheshiloutianwei-'
                  },
                  {
                      type: '表演',
                      class: 'icon-fuwusheshiyanchu-'
                  },
                  {
                      type: '景观位',
                      class: 'icon-fuwusheshijingguanwei-'
                  },
              ],
          }
      },
      components:{
          mchtListInfo: () => import('src/pages/merchant/mcht'),
      },
      methods:{
          // async getMchtListInfo() {
          //     let rep = await getData4.getHomeMchtListInfo({
          //         data: {
          //             cityName: Storage.get('city', true),
          //             position: Storage.get('sit', true)
          //         }
          //     })
          //     if(rep.content){
          //         if(Object.keys(rep.content).length){
          //             this.mchtListInfo = rep.content.mchtList;
          //         }else{
          //             this.mchtListInfo =[]
          //         }
          //     }
          // },
      },
      computed:{

      },
      created:function(){
          // this.getMchtListInfo()
          this.$store.commit('changeState', true); // 请求加载动画
          var me = this;
          //商户信息
          getData.mchtNo({
           mchtId: me.$route.query.mchtId
          }).then(rep => {
          me.businessInfo = rep.content;
          me.busInfoDetail = rep.content.mcht;
          me.facil = rep.content.mcht.mchtFacil.split("");
          //其他分店
          getData2.businessBranch({
              method: 'post',
              data: {"mchtId":  me.busInfoDetail.mchtId, "upperMchtId": me.busInfoDetail.upperMchtId,"cityName":Storage.get('city', true),"position":Storage.get('sit', true)}
          }).then(function (rep) {
               me.mchtListInfo = rep.content.mchtList
               me.mchtListInfo.forEach((item, index) => {
                  me.bannerNum = item.mchtBanner.length;
                 console.log(item.mchtBanner.length)

              })
          })
       });
      }

  }
</script>
<style lang="scss" scoped>
 .common{
     height:3.715rem;
     line-height:3.715rem;
     padding-left:.3rem;
     border-bottom: 1px solid #f0f0f0;
     margin: 0 .667rem;
 }
 .clear{
     height:1rem;
     background-color:#f0f0f0;
 }
 .mchtTime{
     .title{
         font-size:1rem;
         color:rgb(51,51,51);
     }
     .time{
         height:4rem;
         line-height:4rem;
         i{
             padding-left:1rem;
         }
         .service_timer{
             padding-left:3rem;
             font-size:1rem;
             color:rgb(102,102,102);
         }
     }
 }
 .mchtFacil{
      .facil_box{
          ul{
              position: relative;
              margin-top:1rem;
              li{
                  float: left;
                  width: -webkit-calc((100% - 3.335rem )/ 3);
                  height: 2.5rem;
                  line-height: 2.5rem;
                  color:rgb(102,102,102);
              }
              li:nth-child(3n){
                  position: relative;
                  right: 10px;
                  margin-right: 0px;
              }
          }
          li:nth-child(1n){
              margin-left: 1rem;
              margin-right:.8rem;
          }
          li:nth-child(3n){
              width:20%;
              float: right;
              margin-right:1rem;
          }
          .facilities_cont li i {
              margin:0 .3em;
              /*margin-bottom: .625rem;*/
              color:rgb(102,102,102);
              font-size: 1.2rem
          }
      }
 }
 .other{
     .otherMcht{
         width:100%;
         height:3.715rem;
         line-height:3.715rem;
         background-color:#f0f0f0;
         padding-left:.8rem;
     }
     .coupon_bot{
         border:none;
         margin-top:0;
         background-color:rgb(255,255,255);
     }
 }
</style>
<style>
    .couponList12 .myCouponType{
        margin-left:.8rem;
    }
    .couponList12 .myCouponD{
        margin-left:.8rem;
    }
    .couponList12 .myCouponN{
        margin-left:.6rem;
    }
</style>